<template>
	<div class="page">
		<div class="bill-list">
						<div class="bill-item" v-for="billItem in bills" v-bind:key="billItem.id">
			
				<div class="top">
					<div class="top-left">
						<div class="bill-title">{{billItem.billWord}}</div>
						<div class="bill-word">
						{{billItem.billAuthor}}
						</div>
						</div>
						<div>
							<el-button type="danger" icon="el-icon-delete" circle @click="deleteFavorite(billItem)"></el-button>
						</div>	
				</div>
				<div class="bill-image">
					<img :src="billItem.billPic" />
				</div>
				<div class="time">
					<div class="bill-time">{{formatDate(billItem.billTime)}}</div>
				</div>
			</div>
		
		</div>
	</div>
	
</template>

<script>
	import commentitem from '../components/commentitem.vue';
		export default {
			name: 'Home',
			components:{commentitem},
			data() {
				return {
					bills:[]
					
				}
			},
			methods: {
					//获取海报
				loadBills() {
					const loading = this.$loading({
						lock: true,
						text: '咕咕咕...咕咕..',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					});
					this.$http.get('/api/bill-favorites/login',{
						headers:{
							Authorization:'Bearer '+localStorage.getItem("token")
						}
					}).then((result) => {
						console.log("getBills result", result);
						if (result.status == 200) {
							this.bills = result.data.content;
						}
						loading.close();
					});
				},
				deleteFavorite(billItem){
					this.$http.delete("/api//bill-favorites/delete?billId="+billItem.id,{
							headers:{
								Authorization:'Bearer '+localStorage.getItem("token")
							}
						}).then((result)=>{
							if(result.status==401){
								this.$router.push("login");
							}else if(result.status==200){
								this.loadBills();
							}
						}).catch((error)=>{
							
						})
					}
				
				
	},
			mounted() {
				this.loadBills();
			}
		}
</script>

<style scoped>
	*{
		margin: 0;
		padding: 0;
		outline: 0;
	}
	.page {
			font-family: "微软雅黑";
			margin: 0;
			padding: 0;
			width: 100%;
			min-height: 100vh;
			min-width: 900px;
			box-sizing: border-box;
			position: relative;
			display: block;
			background: url(../assets/b1.jpg);
		}
		.bill-list{
			width: 900px;
			min-height: 450px;
			background: #ffffff;
			position: relative;
			margin: 0 auto;
			padding: 30px 32px;
			padding-top: 40px;
			box-shadow: 0px 1px 12px 0px rgba(0,0,0,0.3);
			display: block;
		}
		.bill-item{
			width:800px;
			height:450px;
			margin:10px auto;
			background: #fff;
			display: flex;
			flex-direction: column;
		}
		.top{
			width: 690rpx;
			display: flex;
			flex-direction: row;
		}
		.top-left{
			padding-left: 10px;
			flex:1;
		}
		.top-right{
			padding-right: 20px;
			width: 150rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.bill-title{
			font-weight: 900;
			padding-top: 10px;
				margin-top: 10px;
				margin-bottom: 5px;
				font-size: 170%;
				color: #404040;
				font-weight: 900;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
		}
		
		.bill-word {
			margin-top: 5px;
			margin-bottom: 5px;
			display: flex;
			flex-direction: row;
		}
	
		.bill-image{
			width: 900rpx;
			height: calc(900rpx * 0.618);
			overflow: hidden;
		}
		.bill-image image{
			width:100%;
			height:100%;
		}
		.time{
			width: 90rpx;
			font-size: 100%;
			color: #808080;
		}
		.bill-time{
			padding-right: 20px;
			padding-top: 10px;
			font-size: 100%;
			color: #808080;
			display: flex;
			justify-content: flex-end;
		}
		.box{
			margin-top:5px;
			margin-bottom: 5px;
			padding: 5px 50px;
			display:flex;
			justify-content: flex-end;
			
		}
		.box i{
			font-size:150%;
			padding-right: 20px;
		}
</style>
